<template>
	<view class=" color-black">
		<view class="" v-for="cell,index in questionList">
			<view style="margin:15px 0;">{{cell.name}}</view>
			<view class="questionCart-content color-black " style="	display: grid;
	grid-template-columns: repeat(6, 12%);justify-content: center;
	grid-gap: 15px;">
				<view class="" v-for="item,index in cell.list" @click="clickCart(item,item.indexValue)">
					<view class="circle-question"
						style="background-color: rgb(253, 241, 242);color:rgb(253, 75, 57);border: none;"
						v-if="item.correctResCode=='error'||item.correctResCode=='partRight'">{{index+1}}</view>
					<view class="circle-question"
						style="background-color: rgb(232, 247, 237);color:rgb(32, 198, 134);border: none;"
						v-else-if="item.correctResCode=='right'">{{index+1}}</view>
					<view class="circle-question" v-else>{{index+1}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { onMounted } from "vue";
	const props = defineProps({
		questionList: { default: function() { return [] } },
	})
	const emit = defineEmits(['clickCart'])
	onMounted(() => {
		// console.log(props.questionList)
	})
	const clickCart = (row, index) => {
		emit('clickCart', row, index)
	}
</script>

<style scoped lang="scss">
	.questionCart-content {
		// border: 1px solid red;

		.circle-question {
			display: block;
			width: 36px;
			height: 36px;
			line-height: 36px;
			text-align: center;
			border: 1px solid rgba(0, 0, 0, 0.1);
			border-radius: 50%;
			// margin: 5px 7px 15px 7px;
		}
	}
</style>